{% extends "index.html" %}

{% block head %}
    <link rel="stylesheet" type="text/css" href="/static/css/samples.css" />
    <script src="/static/js/lib/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="/static/js/lib/jquery.cycle.all.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
		$(document).ready(function(){
			$('#sample')
			.cycle({
				fx: 'scrollHorz',
				timeout : 0,
			    next:   '#next', 
			    prev:   '#previous', 
    			pager:  '#ribbon',

    	    pagerAnchorBuilder: function(idx, slide) { 
		        return '<div id="ribbon-element-' + idx + '"></div>'; 
		    } 
			});
		}); 
	</script>
    
    
{% endblock %}
{% block site_header%}
	<div id="site_header_samples"></div>
{% endblock %}

{% block content%}
	<div id="content">
		<div id="samples">
			<div class="ribbon">
				<a id="previous"></a>
				<a id="next"></a>
			</div>
			<div id="ribbon"></div>
			<div id="sample">
				<div id="sample_cofs" style="display: none">
					<span id="sample_pic" onClick=location.href="http://www.new.cofs.org"><img src="/static/images/sample_cofs.jpg" alt="photo"></span>
					<span id="sample_text">
						<div id="sample_text_header"><p style="display:inline-block">COFS</p> (in progress)</div>
						<div id="sample_text_body">
							<p>Design.</p>
							<p>CSS | HTML | XHTML | JAVASCRIPT.</p>
						</div>
						<div id="sample_text_description">
							<p>Complete re-design of the <a href="http://www.cofs.org">www.cofs.org</a>. Changing the layout, design and contents for this not for profit organization's site.</p>
						</div>
					</span>
				</div>
				<div id="sample_art_gallery" style="display: none">
					<span id="sample_pic" onClick=location.href="http://www.acvdelosreyes.com"><img src="/static/images/sample_art_gallery.jpg" alt="photo"></span>
					<span id="sample_text">
						<div id="sample_text_header"><p>Art Gallery</p></div>
						<div id="sample_text_body">
							<p>Design.</p>
							<p>CSS | HTML | XHTML | JAVASCRIPT.</p>
						</div>
						<div id="sample_text_description">
							<p>Web designed as a possible art gallery site. This was just a sample site I designed to see what I could come up with.</p>
						</div>
					</span>
				</div>
				<div id="sample_biolincc">
					<span id="sample_pic" onClick=location.href="https://biolincc.nhlbi.nih.gov/home/"><img src="/static/images/sample_biolincc.jpg" alt="photo"></span>
					<span id="sample_text">
						<div id="sample_text_header"><p>BiOLINCC</p></div>
						<div id="sample_text_body">
							<p>Design | Development.</p>
							<p>CSS | HTML | XHTML | JAVASCRIPT:JQUERY</p>
							<p>PYTHON | POSTGRESQL | DJANGO</p>
						</div>
						<div id="sample_text_description">
							<p>Web application for Biologic Specimen and Data Repository Information Coordinating Center.</p>
						</div>
					</span>
				</div>
				<div id="sample_nccor_catalog">
					<span id="sample_pic" onClick=location.href="http://tools.nccor.org/css/"><img src="/static/images/sample_nccor_catalog.jpg" alt="photo"></span>
					<span id="sample_text">
						<div id="sample_text_header"><p>NCCOR CATALOG</p></div>
						<div id="sample_text_body">
							<p>Design | Development.</p>
							<p>CSS | HTML | XHTML | JAVASCRIPT:PROTOTYPE</p>
							<p>PYTHON | POSTGRESQL | DJANGO</p>
						</div>
						<div id="sample_text_description">
							<p>Web application for Cataloging surveillance systems. Also has user friendly tools to search for, compare, save and edit systems.</p>
						</div>
					</span>
				</div>
				<div id="sample_mowit" style="display: none">
					<span id="sample_pic" onClick=location.href="http://www.mowit.kiumma.com"><img src="/static/images/sample_mowit.jpg" alt="photo"></span>
					<span id="sample_text">
						<div id="sample_text_header"><p>Mowit</p></div>
						<div id="sample_text_body">
							<p>Design.</p>
							<p>CSS | HTML | XHTML | JAVASCRIPT.</p>
						</div>
						<div id="sample_text_description">
							<p>Web designed as a possible lawn mowing business management site. This was just a sample site I desinged to see what I could come up with.</p>
						</div>
					</span>
				</div>
			</div>
		</div>
	</div>
{% endblock %}				